import { defineComponent, onMounted, ref } from 'vue'
import XArrowTitle from '../ArrowTitle'
import $style from './index.module.scss'

export default defineComponent({
	name : 'GlassBox',
    props : {
        cwRate : {
            type : Number,
            default : 0.5
        }
    },
    setup(props, context) {
        const containerRef = ref<{[key:string]:any}>({})
        const canvasRef = ref<{[key:string]:any}>({})

        let linkLeft = ref(0)
        
        onMounted(() => {
            var W = containerRef.value!.clientWidth //整个容器的宽度
            var H = containerRef.value!.clientHeight //整个容器的高度

            canvasRef.value!.width = W
            canvasRef.value!.height = H

            const ctx = canvasRef.value!.getContext('2d')

            var cW = W * props.cwRate
            linkLeft.value = cW + 70

            ctx.beginPath()
            ctx.lineWidth = 2
            ctx.strokeStyle = '#3d4a63'
            ctx.moveTo(2, 27)
            ctx.lineTo(2 + 27, 0 + 2)
            ctx.lineTo(2 + 27 + cW, 0 + 2)
            ctx.lineTo(2 + 27 + cW + 35, 37)
            ctx.lineTo(W - 32, 37)
            ctx.lineTo(W - 2, 63)
            ctx.lineTo(W - 2, H - 2)
            ctx.lineTo(0 + 2, H - 2)
            ctx.closePath()

            ctx.fillStyle = 'rgba(32, 41, 60, 0.3)'
            ctx.fill()
            ctx.stroke()

            ctx.beginPath()
            ctx.moveTo(2, 2)
            ctx.lineTo(2, 20)
            ctx.lineTo(22, 2)
            ctx.closePath()

            ctx.lineWidth = 2
            ctx.strokeStyle = '#a8c4ff'
            ctx.stroke()

            ctx.beginPath()
            ctx.moveTo(W - 2, 37)
            ctx.lineTo(W - 24, 37)
            ctx.lineTo(W - 2, 37 + 19)
            ctx.closePath()

            ctx.lineWidth = 2
            ctx.strokeStyle = '#a8c4ff'
            ctx.stroke()
        })

        return () => (
            <div class={$style.glassContainer} ref={containerRef}>
                <canvas class={$style.canvas} ref={canvasRef}></canvas>
                {linkLeft.value > 0 &&
                    <span class={$style.link} style={'left:' + linkLeft.value + 'px'}>
                        {context.slots.link &&
                            context.slots.link().map(item => item)
                        }
                    </span>
                }
                {/* <router-link class={$style.link} to=''>详情</router-link> */}
                <div class={$style.body}>
                    <div class={$style.blockTitle}>
                        <XArrowTitle>
                            {context.slots.title &&
                                context.slots.title().map(item => item)
                            }
                        </XArrowTitle>
                    </div>
                    <div style='flex:1'>
                        {context.slots.default &&
                            context.slots.default().map(item => item)
                        }
                    </div>
                </div>
            </div>
        )
    }
})

